<template>
  <div>
    <div v-for="(item,index) in list" :id="index" :key="index" class="divItem">
      <Card>
        <p slot="title">第{{ index+1 }}张图片</p>
        <Form ref="editForm" :id="index" :key="index" :model="item">
          <div>
            <img class="form-item-img" :src="item.filename" />
          </div>
          <div class="info-list">
            <ul>
              <li>
                <span>来源:{{ item.sourceToString }}</span>
              </li>
              <li>
                <span>PID:{{ item.pid }}</span>
              </li>
              <li>
                <span>效果图cid:{{ item.oldCid }}</span>
              </li>
              <li>
                <span>效果图aid:{{ item.oldAid }}</span>
              </li>
              <li>
                <span>来源cid:{{ item.sourceOldcid }}</span>
              </li>
              <li>
                <span>来源aid:{{ item.sourceOldaid }}</span>
              </li>
              <li>
                <span>作者昵称:{{ item.userName }}({{ item.uid }})</span>
              </li>
              <li>
                <span>面积:{{ item.caseArea }}㎡</span>
              </li>
              <li>
                <span>价格:{{ item.casePrice }}万</span>
              </li>
              <li>
                <span>创建时间:{{ item.sourceCreateTime }}</span>
              </li>
              <li>
                <span>同步时间:{{ item.sourceSyncTime }}</span>
              </li>
              <li>
                <span>更新时间:{{ item.updateTime }}</span>
              </li>
              <li>
                <label class="label-margin">标题:</label>
                <input type="text" value="item.title" v-model="item.title" class="info-input" />
              </li>
              <li class="li-margin">
                <label class="label-margin" style="vertical-align: top">描述:</label>
                <textarea value="item.depict" v-model="item.depict" class="info-textarea"></textarea>
              </li>
            </ul>
          </div>
          <FormItem v-if="!onepic" label="设置封面" prop="caseId">
            <Radio v-model="item.isCover" :disabled="!isEdit">是</Radio>
          </FormItem>
          <div>
            标签：{{item.dmpTags}}
            <a @click="editDmpTag(item.id)" style="margin-left: 5px">编辑</a>
          </div>
          <div class="margin-top-10">
            <Button type="info" @click="resetForm(index)" :index="index" :disabled="!isEdit">取消</Button>
            <Button
              type="info"
              style="margin-left: 15px"
              @click="editForm(index)"
              :index="index"
              :disabled="!isEdit"
            >保存</Button>
          </div>
        </Form>
      </Card>
    </div>
    <div style="clear:left">
      <Page
        :total="total"
        :page-size="perPage"
        :current="page"
        show-total
        show-sizer
        show-elevator
        @on-change="changePage"
        @on-page-size-change="changePageSize"
      ></Page>
    </div>
    <Modal
      :mask-closable="false"
      :footer-hide="true"
      v-model="DmpTagComponent.visible"
      title="编辑标签"
      :width="860"
      :fullscreen="false"
    >
      <DmpTagComponent
        v-if="DmpTagComponent.visible"
        @cancelClick="DmpTagComponent.visible = false"
        :multiple="false"
        :bizId="DmpTagComponent.bizId"
        :bizType="DmpTagComponent.bizType"
        ref="DmpTagComponent"
      ></DmpTagComponent>
    </Modal>
  </div>
</template>

<script>
import List from "@/utils/xgt/list";
import DmpTagComponent from "@/view/dmpManage/component/editTag";

export default {
  name: "editForm",
  components: {
    DmpTagComponent
  },
  data() {
    return {
      list: [],
      page: 1,
      perPage: 9,
      total: 0,
      DmpTagComponent: {
        bizId: "",
        bizType: "b0001",
        visible: false
      },
      config: {
        source: [],
        visible: [],
        zoneid: [],
        comment_app: [],
        category: [],
        styleid: [],
        hxconfig: [],
        partid: [],
        queryType: [],
        timeType: [],
        showOne: [],
        subSpaceTag: [],
        spaceTagAll: []
      },
      isEdit: false,
      onepic: 0
    };
  },
  methods: {
    getDetail() {
      let urlParams = this.getUrlParams();
      if (!urlParams || !urlParams.id || !urlParams.type) {
        return false;
      }
      let arg = {
        id: urlParams.id,
        type: urlParams.type,
        page: this.page,
        perPage: this.perPage
      };
      List.getDetail(arg).then(res => {
        if (res.errorCode !== 0) {
          this.$Message.error(res.errorMsg);
        }

        for (let v of Object.values(res.data)) {
          if (v.spaceTag !== "") {
            this.zoneChange(v.spaceTag);
            this.$set(v, "subSpaceTagData", this.config.subSpaceTag);
          } else {
            this.$set(v, "subSpaceTagData", []);
          }
        }
        this.list = res.data;
        this.total = res.allRows;
      });
    },
    getUrlParams() {
      let name = this.$route.name;
      let type = this.$route.query.type;
      let id = this.$route.query.id;
      this.isEdit = name === "xgtEdit" ? 1 : 0;
      this.onepic = type === "onepic" ? 1 : 0;
      return { id, type };
    },
    changePage(page) {
      this.page = page;
      this.getDetail();
    },
    changePageSize(pageSize) {
      this.perPage = pageSize;
      this.getDetail();
    },
    getConfig() {
      List.getConfig().then(res => {
        this.config = res.data;
      });
    },
    editForm(index) {
      let item = this.list[index];
      let arg = {
        oldaid: item.oldAid,
        oldcid: item.oldCid,
        title: item.title,
        depict: item.depict,
        category: item.category
      };
      if (item.category === 2) {
        arg["publicSpaceFirst"] = item.zoneId;
        delete arg["zoneid"];
      }
      if (!this.onepic) {
        arg.setCover = item.isCover ? 1 : 0;
      }
      index = index + 1;
      List.editXgtDetail(arg).then(res => {
        if (res.errorCode === 0) {
          this.$Message.info(
            "修改第" + index + "图片成功,oldaid:" + item.oldAid
          );
          this.getDetail();
        } else {
          this.$Message.error(
            "修改第" + index + "图片失败,oldaid:" + item.oldAid
          );
        }
      });
    },
    resetForm() {
      this.$router.push({
        name: "xgtManagerList"
      });
    },
    zoneChange(zoneid) {
      this.config.subSpaceTag = [];
      for (var i = 0; i < this.config.spaceTagAll.length; i++) {
        if (this.config.spaceTagAll[i][zoneid]) {
          this.config.subSpaceTag = this.config.spaceTagAll[i][zoneid];
        }
      }
    },
    spaceChange(zoneid, item) {
      item.subSpaceTagData = [];
      for (var i = 0; i < this.config.spaceTagAll.length; i++) {
        if (this.config.spaceTagAll[i][zoneid]) {
          item.subSpaceTagData = this.config.spaceTagAll[i][zoneid];
        }
      }
    },
    editDmpTag(id) {
      this.DmpTagComponent.bizId = id;
      this.DmpTagComponent.visible = true;
    }
  },
  watch: {
    $route(newRoute) {
      this.getDetail();
    }
  },
  mounted() {
    this.getDetail();
    this.getConfig();
  }
};
</script>

<style scoped>
.divItem {
  float: left;
  margin: 5px;
  width: 387px;
  height: 680px;
  margin-bottom: 25px;
}

.info-list {
  height: 380px;
  overflow-y: auto;
}

ul li {
  list-style-type: none;
}

.form-item-list {
  width: 85px;
  display: inline-block;
}

.form-item-img {
  max-width: 200px;
  height: 100px;
}

.label-margin {
  margin-right: 4px;
}

.info-input {
  width: 280px;
  font-size: 12px;
  height: 21px;
}
.info-textarea {
  width: 280px;
  font-size: 12px;
  height: 60px;
}
.li-margin {
  margin-top: 5px;
}
.margin-top-10 {
  margin-top: 10px;
}
.ivu-col-span-10 {
  width: 100% !important;
}
</style>
